<template>
  <body>
    <div id="fillAspiration">
      <div class="content">
        <div class="menuTitle">
          <!-- 面包屑 -->
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>模拟填志愿</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <!-- 条件筛选 -->
        <div class="choose">
          <span class="chooseTitle">志愿填报</span>
          <span class="chooseInfo">
            当前成绩:
            <span>{{ infoList.type }}</span> /
            <span
              ><span>{{ infoList.score }}</span
              >分</span
            >
            /
            <span
              ><span>{{ infoList.rank }}</span
              >名</span
            >
            <span>
              <el-button
                icon="el-icon-edit"
                size="mini"
                @click="routerChange"
              ></el-button>
            </span>
          </span>
          <div class="chooseArea">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline chooseForm"
            >
              <el-form-item label="填报批次">
                <el-select v-model="formInline.batch" placeholder="不限">
                  <el-option
                    v-for="item in batchList"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="院校所属">
                <el-select v-model="formInline.province" placeholder="不限">
                  <el-option
                    v-for="(item, index) in provinceList"
                    :key="item.index"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="院校类型">
                <el-select v-model="formInline.category" placeholder="不限">
                  <el-option
                    v-for="(item, index) in categoryList"
                    :key="item.index"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="院校特色">
                <el-select v-model="formInline.ts" placeholder="不限">
                  <el-option
                    v-for="(item, index) in tsList"
                    :key="item.index"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button
                  style="
                    margin-right: 0;
                    background-color: rgba(255, 101, 0);
                    color: white;
                  "
                  @click="searchTypes()"
                  >查询</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
        <!-- 查询结果 -->
        <div class="resultArea">
          <span
            v-for="(item, index) in batchChooseList"
            class="batch"
            :class="batchActive == index ? 'batchActive' : ''"
            @click="batchChange(index)"
            >{{ item.batch }}</span
          >

          <el-table
            :data="tableData"
            style="width: 100%"
            :header-cell-style="headClass"
          >
            <el-table-column
              prop="probability"
              label="录取概率"
              width="150"
              align="center"
              :render-header="renderHeader"
            >
              <template slot-scope="scope">
                <span :style="{ color: color() }"
                  >{{ scope.row.probability }}
                  <span v-if="batchActive == 0">%可冲击</span>
                  <span v-if="batchActive == 1">%较稳妥</span>
                  <span v-if="batchActive == 2">%可保底</span>
                </span>
              </template>
            </el-table-column>

            <el-table-column prop="college" label="招生院校" width="300">
              <template slot-scope="scope">
                <router-link
                  :to="`/college/${scope.row.unvId}`"
                  class="name"
                  style="font-weight: 700; font-size: 18px; color: #666"
                  >{{ scope.row.name }}
                </router-link>
                <div class="bottom_type">
                  <span class="tag_item" v-if="scope.row.is985 !== null">{{
                    scope.row.is985
                  }}</span>
                  <span class="tag_item" v-if="scope.row.is211 !== null">{{
                    scope.row.is211
                  }}</span>
                  <span class="tag_item" v-if="scope.row.feature !== null">{{
                    scope.row.feature
                  }}</span>
                  <span class="tag_item">{{ scope.row.province }}</span>
                  <span class="tag_item" style="border: none">{{
                    scope.row.category
                  }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="招生信息" align="center">
              <el-table-column
                prop="code"
                label="招生代码"
                width="90"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.code }} </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="招生人数"
                width="90"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.num }} </span>
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="减扩人数"
                width="90"
                align="center"
              >
                <template slot-scope="scope">
                  <span>{{ scope.row.devNum }} </span>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="历史录取">
              <el-table-column
                prop="year"
                label="2020"
                width="120"
                align="center"
              >
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="light">
                    <div slot="content" class="tips-content">
                      <span><span>最低分</span> / <span>最低位次</span></span>
                    </div>
                    <span v-if="scope.row.list[0] !== null">
                      <span style="color: rgba(236, 0, 0); font-size: 16px">{{
                        scope.row.list[0].minScore
                      }}</span>
                      <span style="color: #999">/</span>
                      <span style="color: rgba(0, 165, 38); font-size: 16px">{{
                        scope.row.list[0].minSection
                      }}</span>
                    </span>
                    <span v-if="scope.row.list[0] === null">
                      <span style="color: rgba(236, 0, 0); font-size: 16px"
                        >--</span
                      >
                      <span style="color: #999">/</span>
                      <span style="color: rgba(0, 165, 38); font-size: 16px"
                        >--</span
                      >
                    </span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="year"
                label="2019"
                width="120"
                align="center"
              >
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="light">
                    <div slot="content" class="tips-content">
                      <span><span>最低分</span> / <span>最低位次</span></span>
                    </div>
                    <span v-if="scope.row.list[1] !== null">
                      <span style="color: rgba(236, 0, 0); font-size: 16px">{{
                        scope.row.list[1].minScore
                      }}</span>
                      <span style="color: #999">/</span>
                      <span style="color: rgba(0, 165, 38); font-size: 16px">{{
                        scope.row.list[1].minSection
                      }}</span>
                    </span>
                    <span v-if="scope.row.list[1] === null">
                      <span style="color: rgba(236, 0, 0); font-size: 16px"
                        >--</span
                      >
                      <span style="color: #999">/</span>
                      <span style="color: rgba(0, 165, 38); font-size: 16px"
                        >--</span
                      >
                    </span>
                  </el-tooltip>
                </template>
              </el-table-column>
              <el-table-column
                prop="year"
                label="2018"
                width="120"
                align="center"
              >
                <template slot-scope="scope">
                  <el-tooltip placement="top" effect="light">
                    <div slot="content" class="tips-content">
                      <span><span>最低分</span> / <span>最低位次</span></span>
                    </div>
                    <span v-if="scope.row.list[2] !== null">
                      <span style="color: rgba(236, 0, 0); font-size: 16px">{{
                        scope.row.list[2].minScore
                      }}</span>
                      <span style="color: #999">/</span>
                      <span style="color: rgba(0, 165, 38); font-size: 16px">{{
                        scope.row.list[2].minSection
                      }}</span>
                    </span>
                    <span v-if="scope.row.list[2] === null">
                      <span style="color: rgba(236, 0, 0); font-size: 16px"
                        >--</span
                      >
                      <span style="color: #999">/</span>
                      <span style="color: rgba(0, 165, 38); font-size: 16px"
                        >--</span
                      >
                    </span>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="college" label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  class="oldStyle"
                  :class="scope.row.wunId !== 0 ? 'newStyle' : ''"
                  @click="fillIn(scope.row)"
                  ><span v-if="scope.row.wunId === 0">填报</span>
                  <span v-else>志愿 {{ scope.row.wunId }}</span></el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </body>
</template>

<script>
import qs from "qs";
import Base64 from "base-64";
import tableHeaderTip from "@/components/question/promptMessage";
import throttling from "@/public/throttling.js";
export default {
  name: "News",
  components: {
    tableHeaderTip,
  },
  data() {
    return {
      // 懒加载
      currentPage: 1,
      pageSize: 10,
      totalPage: 0,
      // 自适应宽度
      screenWidth: document.body.clientWidth,
      screenHeight: document.body.clientHeight,
      batchActive: 0,
      showname: true,
      img: require("@/assets/二维码.png"),
      name: "",
      active: 0,
      // 分页初始条件
      pagination: {
        page: 1,
        count: 1,
        size: 9,
      },
      // 筛选条件
      formInline: {
        batch: "",
        province: "",
        category: "",
        ts: "",
        type: "",
        uniName: "",
        majorName: "",
      },
      batchList: [
        {
          value: "本科一批",
        },
        {
          value: "本科二批",
        },
        {
          value: "高职专科批",
        },
      ],
      provinceList: [
        {
          value: "不限",
        },
        {
          value: "北京",
        },
        {
          value: "天津",
        },
        {
          value: "河北",
        },
        {
          value: "山西",
        },
        {
          value: "内蒙古",
        },
        {
          value: "辽宁",
        },
        {
          value: "吉林",
        },
        {
          value: "黑龙江",
        },
        {
          value: "上海",
        },
        {
          value: "江苏",
        },
        {
          value: "浙江",
        },
        {
          value: "安徽",
        },
        {
          value: "福建",
        },
        {
          value: "江西",
        },
        {
          value: "山东",
        },
        {
          value: "河南",
        },
        {
          value: "湖北",
        },
        {
          value: "广东",
        },
        {
          value: "广西",
        },
        {
          value: "海南",
        },
        {
          value: "重庆",
        },
        {
          value: "四川",
        },
        {
          value: "贵州",
        },
        {
          value: "云南",
        },
        {
          value: "西藏",
        },
        {
          value: "陕西",
        },
        {
          value: "甘肃",
        },
        {
          value: "青海",
        },
        {
          value: "宁夏",
        },
        {
          value: "新疆",
        },
      ],
      categoryList: [
        {
          value: "不限",
        },
        {
          value: "综合",
        },
        {
          value: "理工",
        },
        {
          value: "农业",
        },
        {
          value: "医药",
        },
        {
          value: "师范",
        },
        {
          value: "语言",
        },
        {
          value: "财经",
        },
        {
          value: "政法",
        },
        {
          value: "体育",
        },
        {
          value: "艺术",
        },
        {
          value: "民族",
        },
        {
          value: "军事",
        },
        {
          value: "其他",
        },
      ],
      tsList: [
        {
          value: "不限",
        },
        {
          value: "985",
        },
        {
          value: "211",
        },
        {
          value: "双一流",
        },
      ],
      typeList: [
        {
          value: "不限",
        },
        {
          value: "哲学",
        },
        {
          value: "经济学",
        },
        {
          value: "法学",
        },
        {
          value: "教育学",
        },
        {
          value: "文学",
        },
        {
          value: "历史学",
        },
        {
          value: "理学",
        },
        {
          value: "工学",
        },
        {
          value: "农学",
        },
        {
          value: "医学",
        },
        {
          value: "管理学",
        },
        {
          value: "艺术学",
        },
      ],
      typeLists: [
        [
          {
            value: "不限",
          },
          {
            value: "哲学",
          },
          {
            value: "经济学",
          },
          {
            value: "法学",
          },
          {
            value: "教育学",
          },
          {
            value: "文学",
          },
          {
            value: "历史学",
          },
          {
            value: "理学",
          },
          {
            value: "工学",
          },
          {
            value: "农学",
          },
          {
            value: "医学",
          },
          {
            value: "管理学",
          },
          {
            value: "艺术学",
          },
        ],
        [
          {
            value: "不限",
          },
          {
            value: "农林牧渔大类",
          },
          {
            value: "资源环境与安全大类",
          },
          {
            value: "能源动力与材料大类",
          },
          {
            value: "土木建筑大类",
          },
          {
            value: "水利大类",
          },
          {
            value: "装备制造大类",
          },
          {
            value: "生物与化工大类",
          },
          {
            value: "轻工纺织大类",
          },
          {
            value: "食品药品与粮食大类",
          },
          {
            value: "交通运输大类",
          },
          {
            value: "电子与信息大类",
          },
          {
            value: "医药卫生大类",
          },
          {
            value: "财经商贸大类",
          },
          {
            value: "旅游大类",
          },
          {
            value: "文化艺术大类",
          },
          {
            value: "新闻传播大类",
          },
          {
            value: "教育与体育大类",
          },
          {
            value: "公安与司法大类",
          },
          {
            value: "公共管理与服务大类",
          },
        ],
      ],
      // 结果数组
      batchChooseList: [
        { batch: "可冲击" },
        { batch: "较稳妥" },
        { batch: "可保底" },
      ],
      // 动态获取数据
      tableData: [],
      tableDataLists: [],
      // 高考信息
      infoList: [
        {
          type: "理科",
          score: 690,
          rank: 1900,
          name: "",
          email: "",
        },
      ],
    };
  },
  methods: {
    //显示提示信息
    renderHeader(h, { column }) {
      return h("div", [
        h("span", column.label), // label标题文案
        h(tableHeaderTip, {
          // tooltips组件
          props: {
            messages: [
              "依据成绩信息结合招生计划波动、历史录取波动及省考试院规则综合计算所得。",
            ],
          },
        }),
      ]);
    },
    // 懒加载

    // 表格样式
    headClass() {
      //表头居中显示
      return "color:rgba(255,101,0);font-weight:bold;font-size:16px;text-align:center";
    },
    // 分页
    handleCurrentChange(page) {
      this.pagination.page = page;
      this.getResultList();
      console.log("跳转了");
    },
    // 修改高考信息
    routerChange: throttling(function () {
      this.$router.replace("/");
    }, 1000),
    // 跳转到对应院校的专业填报
    fillIn: throttling(function (rows) {
      this.$router.push({
        name: "fillMajor",
        query: {
          unvId: rows.unvId,
          formType: this.formInline.batch,
        },
      });
    }, 200),
    getResultList() {
      const token = window.sessionStorage.getItem("tokenvalue");
      this.$axios.defaults.headers.common["satoken"] = token;
      this.$axios
        .post(
          "/recommendUniversity",
          qs.stringify({
            status: this.batchActive + 1,
            admissionBatch: this.formInline.batch,
            province: this.formInline.province,
            category: this.formInline.category,
            schoolFlag: this.formInline.ts,
          })
        )
        .then((res) => {
          console.log(res);
          this.tableData = res.data;
        });
    },
    // 切换表格
    batchChange(index) {
      this.batchActive = index;
      this.tableData = this.tableDataLists[index];
      this.getResultList();
    },
    color() {
      if (this.batchActive === 0) {
        return "rgba(255, 97, 97)";
      } else if (this.batchActive === 1) {
        return "rgba(33, 193, 51)";
      } else if (this.batchActive === 2) {
        return "rgba(0, 182, 244)";
      } else {
        return;
      }
    },
    // 下拉框 多选
    searchTypes() {
      this.$axios
        .post(
          "/recommendUniversity",
          qs.stringify({
            status: this.batchActive + 1,
            admissionBatch: this.formInline.batch,
            province: this.formInline.province,
            category: this.formInline.category,
            schoolFlag: this.formInline.ts,
          })
        )
        .then((res) => {
          this.tableData = res.data;
        });
    },
  },
  created() {
    this.$axios.get("/userInfo").then((res) => {
      console.log(res);
      this.infoList = res.data;
    });
    //如果没有这句代码，select中初始化会是空白的，默认选中就无法实现
    this.formInline.batch = this.batchList[0].value;
    this.formInline.province = this.provinceList[0].value;
    this.formInline.category = this.categoryList[0].value;
    this.formInline.ts = this.tsList[0].value;
    this.formInline.type = this.typeList[0].value;
    this.getResultList();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
body {
  width: 100%;
}

#fillAspiration {
  display: flex;
  flex-direction: column;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.content {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  margin: 1.6vh auto;
}

.menuTitle {
  height: 8.1vh;
  line-height: 8.1vh;
  text-align: left;
  margin-left: 2.2vw;
}

.el-breadcrumb {
  height: 2.9vh;
  line-height: 2.9vh;
}

.menuTitle .el-breadcrumb__item {
  font-size: 14px;
}

.choose {
  width: 95%;
  height: 32.5vh;
  margin-left: 2.2vw;
}

.choose .chooseTitle {
  padding: 1.6vh 1.5vw;
  border-radius: 5px;
  text-align: center;
  width: 7.1vw;
  height: 6.5vh;
  line-height: 6.5vh;
  background-color: rgba(255, 101, 0);
  color: white;
}

.choose .chooseInfo {
  float: right;
}

.choose .chooseArea {
  width: 100%;
  height: 16.3vh;
  border: 1px solid rgba(215, 215, 215);
  border-radius: 5px;
}

.chooseArea /deep/ .el-form {
  width: 75%;
  margin: 4.1vh auto;
}

.chooseArea .el-select {
  width: 8.9vw;
}

.resultArea {
  width: 95%;
  margin-left: 2.2vw;
  border-radius: 5px;
}

.resultArea .batch {
  height: 6.5vh;
  width: 7.4vw;
  display: inline-block;
  border-radius: 5px;
  text-align: center;
  line-height: 6.5vh;
  border: 1px solid rgba(215, 215, 215);
}

.batchActive {
  background-color: rgba(255, 101, 0);
  color: white;
}

.resultArea .batch:hover {
  cursor: pointer;
  background-color: rgba(255, 101, 0);
  color: white;
}

.resultArea.name {
  color: #555555;
  margin-left: 0.7vw;
  font-weight: 700;
  font-size: 18px;
}

.resultArea.name :hover {
  color: rgba(255, 101, 0);
}

.tag_item {
  float: left;
  color: #555555;
  font-size: 14px;
  padding-right: 0.7vw;
  margin-right: 0.7vw;
  border-right: 1px solid #c5c5c5;
  line-height: 2.4vh;
  cursor: pointer;
}

.bottom_type {
  width: 22.2vw;
  height: 4.9vh;
  margin-left: 0.7vw;
  margin-top: 0.8vh;
}

.bottom_type span {
  font-size: 12px;
}

.oldStyle {
  color: rgba(255, 101, 0);
  border: 1px solid rgba(255, 101, 0);
}

.newStyle {
  color: white;
  background-color: rgba(255, 97, 97);
  border: rgba(255, 97, 97);
  border: none;
}

.pagination {
  width: 23.1vw;
  height: 4.9vh;
  margin: 3.3vh auto;
}
</style>
